<template>
  <div class="weather-content">
    <canvas ref="windyCanvas" class="canvasMap"></canvas>
    <canvas ref="isolineCanvas" class="canvasMap"></canvas>
    <canvas ref="arrowCanvas" class="canvasMap"></canvas>
    <div class="map-content" id="map"></div>
    <div class="button-list">
      <el-button
        type="warning"
        v-for="item in typeList"
        :key="item.prop"
        @click="handleChange(item.prop)"
        >{{ item.name }}</el-button
      >
    </div>
  </div>
</template>

<script>
// ol
import { Map, View } from "ol";
import { defaults } from "ol/control";
import { defaults as interactionDefaults } from "ol/interaction";
import { fromLonLat } from "ol/proj";
import TileLayer from "ol/layer/Tile";
import XYZ from "ol/source/XYZ";
import * as UtilMethods from "./js/util";
import DrawMethods from "./js/draw";

const MapConfig = {
  center: [115, 31], // 初始化的中心点
  zoom: 5, // 初始化的图层
  EPSGCode: "EPSG:3857", // 投影
  mapZIndexLimit: [5, 7], // 地图缩放的限制
  shipZoomLimit: [10, 16], // 船舶渲染变化的限制
};

import WeatherMixin from "./weather.js";
export default {
  mixins: [WeatherMixin],
  data() {
    return {
      DrawMethods,
      UtilMethods,
      code: "",
      xMap: null,
      MapConfig,
      typeList: [
        {
          name: "气温",
          prop: "temp",
        },
        {
          name: "海温",
          prop: "sst",
        },
        // {
        //   name: "十米风",
        //   prop: "wind",
        // },
        {
          name: "盐度",
          prop: "salt",
        },
        {
          name: "海浪",
          prop: "shww",
        },
        {
          name: "海流",
          prop: "flow",
        },
      ],
    };
  },
  methods: {
    handleChange(val) {
      this.weatherType = val;
    },
    codeRun(code) {
      this.code = code;
      try {
        eval(code);
      } catch {
        this.$message.error("语法存在错误，请检查你的代码");
      }
    },
    initMap() {
      this.MapCoordinate = this.MapConfig.center;
      var mview = new View({
        projection: this.MapConfig.EPSGCode,
        center: fromLonLat(this.MapCoordinate),
        zoom: this.MapConfig.zoom,
        maxZoom: this.MapConfig.mapZIndexLimit[1],
        minZoom: this.MapConfig.mapZIndexLimit[0],
        constrainResolution: true,
      });
      this.map = new Map({
        controls: defaults({
          attribution: false,
          zoom: false,
          rotate: false,
        }).extend([]),
        target: "map",
        layers: [
          new TileLayer({
            source: new XYZ({
              url: "http://47.99.80.195:1097/map/{z}/{x}_{y}.png",
            }),
            zIndex: 200,
            name: "Main",
          }),
        ],
        view: mview,
        interactions: new interactionDefaults({
          doubleClickZoom: false, // 屏蔽双击放大事件
        }),
      });
    },
  },
  mounted() {
    this.initMap();
  },
};
</script>

<style scoped lang="scss">
.weather-content {
  width: 100%;
  height: 100%;
  position: relative;
  .map-content {
    width: 100%;
    height: 100%;
    background-color: #a3ccff;
  }
  .canvasMap {
    position: absolute;
    z-index: 2;
    pointer-events: none;
    top: 0;
    left: 0;
  }
  .button-list {
    position: absolute;
    top: 20px;
    left: 20px;
  }
}
</style>
